<template>
  <tdt-map :center="state.center" :zoom="state.zoom" :loadConfig="loadConfig" :controls="state.controls">
    <tdt-search @search-complete="searchComplete" @poi-click="poiClick" @suggest-click="suggestClick"></tdt-search>
  </tdt-map>
</template>

<script lang="ts" setup>
import "vue-tianditu/lib/style.css";
import { reactive } from "vue";
import { TdtMap, TdtSearch } from "vue-tianditu";
const loadConfig = { v: "4.0", tk: "ca44e934031d3b685438b13772ffd128" };
const state = reactive(
  {
    center: [113.280637, 23.125178],
    zoom: 11,
    controls: [
      "Zoom",
      "Scale",
      {
        name: "MapType",
        position: "topright",
        mapTypes: [
          {
            title: "地图", //地图控件上所要显示的图层名称
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小 80x80）
            layer: "TMAP_NORMAL_MAP" //地图类型，在原天地图api中以window.TMAP_NORMAL_MAP表示，此处为字符串
          },
          {
            title: "卫星",
            icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
            layer: "TMAP_SATELLITE_MAP"
          },
          {
            title: "卫星混合",
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
            layer: "TMAP_HYBRID_MAP"
          },
          {
            title: "地形",
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
            layer: "TMAP_TERRAIN_MAP"
          },
          {
            title: "地形混合",
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
            layer: "TMAP_TERRAIN_HYBRID_MAP"
          }
        ]
      },
      {
        name: "OverviewMap",
        position: "bottomright",
        isOpen: false
      }
    ]
  }
);

const searchComplete = (result: T.LocalSearchResult) => {
  console.log(result);
}
const poiClick = (poi: T.LocalSearchPoi) => {
  console.log(poi);
}
const suggestClick = (suggest: T.LocalSearchSuggest) => {
  console.log(suggest);
}

</script>
